import EchartsWrap from '@/components/widgets/EchartsWrap';
import React, { useEffect, useState } from 'react';
import { connect } from 'umi';

// todo 需要设计师给出更多颜色
let color = [
  '#2FB0FF',
  '#5A4AFF',
  '#ffffff',
  'red',
  'green',
  'yellow',
  'blue',
  'orange',
  'gray',
  '#ffffff',
  '#ffffff',
  '#ffffff',
  '#ffffff',
  '#ffffff',
];

let placeHolderStyle = {
  normal: {
    label: {
      show: false,
    },
    labelLine: {
      show: false,
    },
    color: 'rgba(0, 0, 0, 0)',
    borderColor: 'rgba(0, 0, 0, 0)',
    borderWidth: 0,
  },
};

const option = {
  backgroundColor: 'transparent',
  tooltip: {
    show: true,
    trigger: 'item',
  },
  title: [
    {
      text: '工 程 类 型',
      top: '52%',
      textAlign: 'center',
      left: '28%',
      textStyle: {
        color: 'rgba(255,255,255, 0.6)',
        fontSize: 14,
        fontWeight: '400',
      },
    },
    {
      text: `{a|${3}} {b|类}`,
      top: '36%',
      textAlign: 'center',
      left: '28%',
      textStyle: {
        rich: {
          a: {
            lineHeight: 32,
            color: '#2FB0FF',
            fontSize: 24,
            fontWeight: '500',
          },
          b: {
            lineHeight: 32,
            color: 'rgba(255,255,255,0.5)',
            fontSize: 12,
          },
        },
      },
    },
  ],
  legend: {
    type: 'scroll',
    orient: 'vertical',
    // data: names,
    icon: 'stack',
    itemWidth: 8,
    itemHeight: 2,
    right: '60px',
    top: '36%',
    textStyle: {
      color: '#fff',
      fontSize: 12,
    },
  },
  series: [
    {
      type: 'pie',
      zlevel: 1,
      silent: true,
      center: ['30%', '50%'],
      radius: ['61%', '60%'],
      hoverAnimation: false,
      color: '#1C3544',
      label: {
        normal: {
          show: false,
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
      data: [1],
    },
    {
      name: '',
      type: 'pie',
      clockWise: false,
      startAngle: '0',
      center: ['30%', '50%'],
      radius: ['50%', '51%'],
      hoverAnimation: false,
      labelLine: { show: false },
      label: { show: false },
      // data: list,
      animationType: 'scale',
      animationEasing: 'elasticOut',
      // animationDelay: function(idx) {
      //   return idx * 50;
      // },
    },
  ],
};

// 项目类型
function getAllProjCategoryData(_data) {
  let legend = [
    '市政工程',
    '房屋建筑工程',
    '公路工程',
    '港口与航道工程',
    '机电安装工程',
    '其他',
    // '铁路工程',
    // '水利水电工程',
    // '电力工程',
    // '矿山工程',
    // '冶炼工程',
    // '化工石油工程',
    // '通信工程',
  ];
  let data = legend.map(() => 0);
  _data.forEach(({ category }) => {
    let index = legend.indexOf(category);
    index = index === -1 ? legend.length - 1 : index;
    data[index] += 1;
  });
  return {
    legend,
    data,
  };
}

/**
 * 项目规模统计图
 * @param {*} param0
 */
const ProjectSize = ({ projList }) => {
  const [curData, setCurData] = useState(option);
  useEffect(() => {
    const newOption = JSON.parse(JSON.stringify(option));
    const { data, legend } = getAllProjCategoryData(projList);
    newOption.series[1].data = data.reduce((result, e, i) => {
      if (!e) {
        return result;
      }
      result.push(
        {
          value: data[i],
          name: legend[i],
          itemStyle: {
            normal: {
              borderWidth: 2,
              shadowBlur: 6,
              borderColor: color[i],
              shadowColor: color[i],
              color: color[i],
            },
          },
        },
        {
          value: data.length / 30,
          name: '',
          itemStyle: placeHolderStyle,
          tooltip: {
            show: false,
          },
        },
      );
      return result;
    }, []);
    newOption.legend.data = legend;
    newOption.title[1].text = `{a|${newOption.series[1].data.length / 2}} {b|类}`;
    newOption.series[1].animationDelay = function(idx) {
      return idx * 50;
    };
    setCurData(newOption);
  }, [projList]);

  return (
    <EchartsWrap
      option={curData}
      width={350}
      style={{ height: 240 }}
      opts={{ height: 240 }}
    ></EchartsWrap>
  );
};

// export default ProjectSize;
export default connect(({ kanban }) => {
  return { projList: kanban.projList };
})(ProjectSize);
